import React from 'react'
import { browserHistory ,Link} from 'react-router'
import './BankCard.less'
import Enume from 'containers/Wallet/enume'
import filter from 'common/filter'
/**
 * 类别：组件
 * 功能：银行卡
 * 组件入参数：showCheckBox 是否展示选择框
 *           choosed 是否被选中
 */
class BankCard extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            accountStatus : 0,
            showMore : false
        }
    }
    componentWillReceiveProps (nextProps) {
        this.setState({
            accountStatus: nextProps.accountStatus
        });
    }
    componentWillMount () { 
        this.setState({
            accountStatus : this.props.accountStatus,
            showMore : this.props.showMore
        })
    }

    handleClick (){
        if (this.props.onClick) {
            this.props.onClick(this.props.card);
        }
    }
    render() {
        return (
        	<div className={this.props.choosed === true ? 'active bankCard' : 'bankCard'}  onClick={this.handleClick.bind(this)}>
                {
                    this.props.showCheckBox ? <div className="info">
                        {
                            this.props.choosed === true ?  <div><i className="iconfont icon-checkcircle"/></div> : 
                            <div className="lightgray"><i className="iconfont icon-circular"/></div>
                        }
                        <div> </div>
                    </div> : ''
                }
                
            {/* 银行卡图标 */}
                <div className="iconItem" >
                    <div className="icon">
                        {this.props.card.bankIconUrl ? <img src={this.props.card.bankIconUrl} alt="" /> : ''}
                        
                    </div>
                </div>
                <div className="content">
                    <div className="bank">{this.props.card.bankName}</div>
                    <div className="number">{filter.toBankCard(this.props.card.bankCardNo)}</div>
                    <div className="type">
                        {
                            Enume.cardType[this.props.card.cardType] ? <span style={{marginRight:'0.1rem'}}>{Enume.cardType[this.props.card.cardType]}</span> : ''
                        }
                        
                        <span className={this.props.card.cardType == 3 ? 'company accountType' : 'person accountType'} >
                            {this.props.card.cardType == 3? '公司' : '个人'}
                        </span>
                    </div>
                </div>
                    {
                
                        this.state.accountStatus ? <div className="float-right padding5 accountStatus">
                            <span>{Enume.accountStatus[this.state.accountStatus]}</span>
                        </div> : ''
                
                    }
                <div className="float-right padding5 gray" style={{lineHeight:'0.7rem'}}>
                    {
                        this.state.showMore ? 
                            <i className="iconfont icon-right"/> : ''
                    }
                </div> 
        	</div>
        )
    }
}

export default BankCard
